<template>
  <div class="feedback">
    <div class="about-close">
      <img
        @click="feedback"
        src="../../assets/img/about/close_btn_black.svg"
        alt=""
      />
      <div>close</div>
    </div>

    <div class="liuyan">推荐留言</div>

    <div class="feedText">
      啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>

    <div>
      <img src="../../assets/img/about/contact_img_tit.svg" alt="" />
    </div>

    <div class="feedInput">
      <div>请输入你要推荐的美食或者对网页的修改意见</div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 6 }"
        placeholder="请输入内容"
        v-model="textarea"
        maxlength="500"
        show-word-limit
      >
      </el-input>
      <span @click="send">发送</span>
    </div>

    <div></div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  name: "Feedback",
  data() {
    return {
      text: "",
      textarea: "",
      showFeed: true,
    };
  },
  methods: {
    feedback() {
      this.showFeed = false;
      this.$emit("childByFeed", this.showFeed);
    },
    send() {
      if (
        sessionStorage.getItem("userid") == "null" ||
        sessionStorage.getItem("userid") == null
      ) {
        this.$alert("为了更好获取您的意见请先进行登录", "提示", {
          confirmButtonText: "确定",
        });
        this.showFeed = false;
        this.$emit("childByFeed", this.showFeed);
      } else {
        request({
          url: "/user/addFeedback",
          method: "post",
          params: {
            fbContent: this.textarea,
            userId: sessionStorage.getItem("userid"),
          },
        })
          .then((res) => {
            this.$alert("提交成功", "提示", {
              confirmButtonText: "确定",
            });
            this.showFeed = false;
            this.$emit("childByFeed", this.showFeed);
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style>
.feedback {
  font-size: 0.1rem;
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 999;
  background-color: #fff;
}

.liuyan {
  margin-top: 0.7rem;
  font-size: 0.15rem;
  color: rgb(230, 127, 76);
}

.feedText {
  width: 5rem;
  margin: 0 auto;
  margin-top: 0.3rem;
  line-height: 0.15rem;
  font-size: 0.1rem;
  letter-spacing: 0.03rem;
}

.feedback :nth-child(4) {
  margin-top: 0.6rem;
}

.feedback :nth-child(4) img {
  width: 2.5rem;
}

.feedInput {
  width: 5rem;
  margin: 0 auto;
}

.feedInput div {
  margin-top: 0.4rem;
}

.feedInput input {
  width: 4rem;
  height: 3rem;
}

.feedInput span {
  width: 1rem;
  height: 0.3rem;
  line-height: 0.3rem;
  display: inline-block;
  border-radius: 0.05rem;
  background-color: rgb(36, 184, 242);
  font-size: 0.12rem;
  color: #fff;
  margin-top: 0.2rem;
  cursor: pointer;
}

.feedback :nth-child(6) {
  width: 8rem;
  height: 1px;
  margin: 0 auto;
  background-color: rgb(150, 146, 146);
  border-radius: 10px;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
</style>